<div class="page-home row-content am-cf">

    <!-- 商城统计 -->
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
            <div class="widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">用户统计</div>
                </div>
                <div class="widget-body am-cf">
                    <!--                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">-->
                    <!--                        <div class="widget-card card__blue am-cf">-->
                    <!--                            <div class="card-header">商品总量</div>-->
                    <!--                            <div class="card-body">-->
                    <!--                                <div class="card-value">-->
                    <? //= $data['widget-card']['goods_total'] ?><!--</div>-->
                    <!--                                <div class="card-description">当前商品总数量</div>-->
                    <!--                                <span class="card-icon iconfont icon-goods"></span>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->

                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                        <div class="widget-card card__red am-cf">
                            <div class="card-header">用户总量</div>
                            <div class="card-body">
                                <div class="card-value"><?= $data['widget-card']['user_total'] ?></div>
                                <div class="card-description">当前用户总数量</div>
                                <span class="card-icon iconfont icon-user"></span>
                            </div>
                        </div>
                    </div>

                    <!--                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">-->
                    <!--                        <div class="widget-card card__violet am-cf">-->
                    <!--                            <div class="card-header">订单总量</div>-->
                    <!--                            <div class="card-body">-->
                    <!--                                <div class="card-value">-->
                    <? //= $data['widget-card']['order_total'] ?><!--</div>-->
                    <!--                                <div class="card-description">已付款订单总数量</div>-->
                    <!--                                <span class="card-icon iconfont icon-order"></span>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->

                    <!--                    <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">-->
                    <!--                        <div class="widget-card card__primary am-cf">-->
                    <!--                            <div class="card-header">评价总量</div>-->
                    <!--                            <div class="card-body">-->
                    <!--                                <div class="card-value">-->
                    <? //= $data['widget-card']['comment_total'] ?><!--</div>-->
                    <!--                                <div class="card-description">订单评价总数量</div>-->
                    <!--                                <span class="card-icon iconfont icon-haoping2"></span>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->

                </div>
            </div>
        </div>
    </div>

    <!-- 实时概况 -->
    <div class="row">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">
            <div class="widget am-cf">
                <div class="widget-head">
                    <div class="widget-title">实时概况</div>
                </div>
                <div class="widget-body am-cf">
                    <!--                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">-->
                    <!--                        <div class="widget-outline dis-flex flex-y-center">-->
                    <!--                            <div class="outline-left">-->
                    <!--                                <img src=""-->
                    <!--                                     alt="">-->
                    <!--                            </div>-->
                    <!--                            <div class="outline-right dis-flex flex-dir-column flex-x-between">-->
                    <!--                                <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">销售额(元)</div>-->
                    <!--                                <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">-->
                    <? //= $data['widget-outline']['order_total_price']['tday'] ?><!--</div>-->
                    <!--                                <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">-->
                    <!--                                    昨日：-->
                    <? //= $data['widget-outline']['order_total_price']['ytd'] ?><!--</div>-->
                    <!--                            </div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <!--                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">-->
                    <!--                        <div class="widget-outline dis-flex flex-dir-column flex-x-between">-->
                    <!--                            <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">支付订单数</div>-->
                    <!--                            <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">-->
                    <? //= $data['widget-outline']['order_total']['tday'] ?><!--</div>-->
                    <!--                            <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">-->
                    <!--                                昨日：-->
                    <? //= $data['widget-outline']['order_total']['ytd'] ?><!--</div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">
                        <div class="widget-outline dis-flex flex-y-center">
                            <div class="outline-left">
                                <img src=""
                                     alt="">
                            </div>
                            <div class="outline-right dis-flex flex-dir-column flex-x-between">
                                <div style="color: rgb(102, 102, 102); font-size: 1.3rem;">新增用户数</div>
                                <div style="color: rgb(51, 51, 51); font-size: 2.4rem;"><?= $data['widget-outline']['new_user_total']['tday'] ?></div>
                                <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">
                                    昨日：<?= $data['widget-outline']['new_user_total']['ytd'] ?></div>
                            </div>
                        </div>
                    </div>
                    <!--                    <div class="am-u-sm-6 am-u-md-6 am-u-lg-3">-->
                    <!--                        <div class="widget-outline dis-flex flex-dir-column flex-x-between">-->
                    <!--                            <div style="color: rgb(102, 102, 102); font-size: 1.2rem;">下单用户数</div>-->
                    <!--                            <div style="color: rgb(51, 51, 51); font-size: 2.4rem;">-->
                    <? //= $data['widget-outline']['order_user_total']['tday'] ?><!--</div>-->
                    <!--                            <div style="color: rgb(153, 153, 153); font-size: 1.2rem;">-->
                    <!--                                昨日：-->
                    <? //= $data['widget-outline']['order_user_total']['ytd'] ?><!--</div>-->
                    <!--                        </div>-->
                    <!--                    </div>-->
                </div>
            </div>
        </div>
    </div>

    <!-- 近七日交易走势 -->
    <!--    <div class="row">-->
    <!--        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12 am-margin-bottom">-->
    <!--            <div class="widget am-cf">-->
    <!--                <div class="widget-head">-->
    <!--                    <div class="widget-title">近七日交易走势</div>-->
    <!--                </div>-->
    <!--                <div class="widget-body am-cf">-->
    <!--                    <div id="echarts-trade" class="widget-echarts"></div>-->
    <!--                </div>-->
    <!--            </div>-->
    <!--        </div>-->
    <!--    </div>-->

</div>
<script src="assets/common/js/echarts.min.js"></script>
<script src="assets/common/js/echarts-walden.js"></script>
<script type="text/javascript">

    /**
     * 近七日交易走势
     * @type {HTMLElement}
     */
    var dom = document.getElementById('echarts-trade');
    echarts.init(dom, 'walden').setOption({
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['成交量', '成交额']
        },
        toolbox: {
            show: true,
            showTitle: false,
            feature: {
                mark: {show: true},
                magicType: {show: true, type: ['line', 'bar']}
            }
        },
        calculable: true,
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: <?= $data['widget-echarts']['date'] ?>
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '成交额',
                type: 'line',
                data: <?= $data['widget-echarts']['order_total_price'] ?>
            },
            {
                name: '成交量',
                type: 'line',
                data: <?= $data['widget-echarts']['order_total'] ?>
            }
        ]
    }, true);

</script>